import React, { Component } from 'react';

/*
    1.组件更新时
    a.setState
 */
class Tesing extends Component {
    static  getDerivedStateFromProps(props,state){
        console.log("1. 组件更新 App getDerivedStateFromProps",props,state);
        // 这里返回的值会以键值对形式返回给state
        // return {
        //     title:"zoo"
        // };
        return null
    }
    shouldComponentUpdate(nextProps,nextState){
        // false =>组件不会更新
        // true =>组件更新
        console.log("2.组件更新 shouldComponentUpdate",nextProps,nextState)
        return true;
        // return false;
    }
    state={
        msg:"🐂"
    }
    handClick=(e) => {
        this.setState({
            msg:"🐖"
        })
    }
    render() {
        console.log("3. 组件更新 render")
        return (
            <div>
                <h1>{this.state.msg}</h1>
                <button onClick={this.handClick}>改变信息</button>
            </div>
        );
    }
    getSnapshotBeforeUpdate(preProps,preState){
        console.log("4. 组件更新 执行 getSnapshotBeforeUpdate",preProps,preState)
        return 100
    }
    componentDidUpdate(preProps,preState,snapshot){
        console.log("5. 组件更新 执行 componentDidMount",preProps,preState,snapshot)
    }
}

export default Tesing;